import React from 'react'

import {
  List,
} from 'antd-mobile'
import { Map } from 'react-amap';

import styles from '../../styles.less'
import PublicTemplate from '../../../../services/PublicTemplate';

const imgData = [{
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
},]

const projectDetailsData = [{
  title: '行政区划：',
  value: '上虞区',
}, {
  title: '牵头单位：',
  value: '市无废办',
}, {
  title: '主要内容：',
  value: '研究建立以固体废物减量化和循环利用为核心指标的“无废城市”建设指标分析，并与生态文明建设考核目标体系、上虞区省级山水林田湖草生态保护修复试点实施方案指标分析以及绿色发展指标分析衔接融合。贯彻落实国家固体废物统计制度，统一工业固体废物数据统计范围、口径和方法，完善农业废弃物、建筑垃圾统计方法。',
}, {
  title: '清单进度：',
  value: '已印发《上虞区“无废城市”建设试点工作实施方案》(区委办〔2019〕141号)，建立“无废上虞”建设指标分析，并通过可行性分析，已将指标完成要求纳入考核办法。'
}, {
  title: '支撑材料：',
  value: '《上虞区“无废城市”建设试点工作实施方案》',
  download: true,
  extra: (
    <img
      src={require('../../../../assets/image/download.png')}
      style={{
        paddingRight: '59px',
        width: '50px',
        height: '38px',
      }}
      alt="" />
  )
}]

function buildImgContainer() {
  const more = imgData.length > 6
  const size = more ? imgData.length - 6 : 0

  const data = more ? imgData.slice(0, 6) : imgData

  return (
    <div className={styles.img_container}>
      {
        data.map((item, index) => (
          <div
            key={item.src}
            className={styles.img_item}
            style={{
              backgroundImage: `url(${item.src})`,
            }}>
            {
              index === 5 ? (
                <div className={styles.gridItem}>
                  +{size}
                </div>
              ) : null
            }
          </div>
        ))
      }
    </div>
  )
}

export default class ResDetails extends React.Component {
  render() {
    const title = '建立“无废上虞”建设指标分析，发挥导向引领作用'

    return (
      <div>
        <div className={styles.projectDetail_title}>
          {PublicTemplate.stringToEllipsis(title, 15)}
        </div>
        <List>
          {
            projectDetailsData.map(item => (
              <List.Item
                key={item.title}
                extra={item.extra ? item.extra : null}>
                <div className={styles.list_title}>
                  {item.title}
                  <span className={styles.list_value}
                    style={{
                      color: item.download ? 'rgba(32, 157, 235, 1)' : 'rgba(51, 51, 51, 1)'
                    }}
                  >{item.value}</span>
                </div>
              </List.Item>
            ))
          }
        </List>

        <div className={styles.img_grid}>
          {
            buildImgContainer()
          }
        </div>
        <div className={styles.position_container}>
          <div className={styles.position_title}>
            <span>项目定位</span>
          </div>
          <div className={styles.map_container}>
            <Map amapkey='b3e8d4d69dfcb991b90a9d2cc3c7ab18' />
          </div>
        </div>
      </div>
    );
  }
}